@font-face { font-family: constructium; /* We define a name for our font family */ src: url(C:\Users\nerdl\OneDrive\Documents\& - Stuff - &\fonts\constructium\Constructium.ttf); /* we tell the browser where it is */ } /* background color is white; container color is base*/ /*color for boxes inside container is light*/ :root { --base-color: #def0ff; --light-color: #bfe2ff; --mid-color: #79c3ff; --dark-color: #43abff; --writing-color: #6992b5; } body { .box_background { background-color: var(--base-color); border: 4px solid var(--light-color); border-radius: 3.5px; font-family: constructium; /* We tell the browser to use the font we defined for text in ... */ } .box_top { background-color: var(--light-color); border: 4px outset var(--light-color); border-radius: 3.5px; margin: auto; } .box1 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } .box2 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } .box3 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } .box4 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } .box5 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } .box6 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } .box7 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } .box8 { background-color: var(--light-color); border: 4px outset var(--light-color); padding: 14px; border-radius: 3.5px; } background-color: white; display: relative; } a href { text-decoration: none; color: var(--mid-color); font-size: 17.5px; } /*h3 is used exclusively for links; mid color*/ h3 { color: var(--mid-color); text-align: center; font-size: 17.5px; } /*mid color*/ h2 { color: var(--mid-color); text-align: center; font-size: 22.5px; } /*dark color*/ h1 { color: var(--dark-color); text-align: center; font-size: 30.5px; } /*writing color*/ p { color: var(--writing-color); text-align: center; font-size: 15.5px; }